<template>
  <div>
    <audio :src="audioWing" ref="audio" loop autoplay></audio>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</swiper-slide>
      <swiper-slide>I'm Slide 5</swiper-slide>
      <swiper-slide>I'm Slide 6</swiper-slide>
      <swiper-slide>I'm Slide 7</swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      audioWing: 'http://sc1.111ttt.cn:8282/2018/1/03m/13/396131232171.m4a#.mp3',
      audio: '',
      hidden: '',
      list: [],
      swiperOption: {
        direction: 'vertical',
        setWrapperSize: true,
        height: window.innerHeight,
        resistanceRatio: 1,
        observeParents: true,
        on: {
          slideChange: () => {
            let swiper = this.$refs.mySwiper.swiper
            console.log(swiper.activeIndex)
            this.$toast.center(swiper.activeIndex)
          }
        }
      }
    }
  },
  mounted() {
    let flag = true
    this.audio = this.$refs.audio
    let visibilityChange
    if (this.$getDeviceInfo().isWeiXin) {
      this.autoPlayAudio()
    } else if (this.$getDeviceInfo().isIOS) {
      window.addEventListener('touchstart', () => {
        if (flag) {
          this.audio.load()
          this.audio.play()
          flag = false
        }
      }, false)
    }
    this.initPageChange()
  },
  methods: {
    initPageChange() {
      let visibilityChange
      if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support 
        this.hidden = 'hidden'
        visibilityChange = 'visibilitychange'
      } else if (typeof document.msHidden !== 'undefined') {
        this.hidden = 'msHidden'
        visibilityChange = 'msvisibilitychange'
      } else if (typeof document.webkitHidden !== 'undefined') {
        this.hidden = 'webkitHidden'
        visibilityChange = 'webkitvisibilitychange'
      }

      if (typeof document.addEventListener === "undefined" || typeof document[this.hidden] === "undefined") {
        console.log('您的手机不支持当前功能')
      } else {
        // 处理页面可见属性的改变
        document.addEventListener(visibilityChange, () => {
          let isPaused = document[this.hidden]
          if (isPaused) {
            this.audio.pause()
          } else {
            this.audio.play()
          }
        }, false)
      }
    },
    autoPlayAudio() {
      wx.config({
        // 配置信息, 即使不正确也能使用 wx.ready
        debug: false,
        appId: '123',
        timestamp: 1,
        nonceStr: '213',
        signature: '213',
        jsApiList: []
      })
      wx.ready(() => {
        this.audio.play()
      })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
